<template>
  <div class="container">
    <calendar :id="id"></calendar>
    <div class="roomList">
      <el-row :gutter="20">
        <el-col :span="12" v-for="(item, index) in roomList" :key="index">
          <div
            :class="item.checked ? 'roomInfo active' : 'roomInfo'"
            @click="checkRoom(index)"
          >
            <div class="checkBox">
              <el-checkbox v-model="item.checked"></el-checkbox>
            </div>
            <el-row :gutter="20">
              <el-col :span="10">
                <img :src="item.picture" class="roomImage" alt="" />
              </el-col>
              <el-col :span="14">
                <p class="roomName">{{ item.name }}</p>
                <el-row :gutter="20">
                  <el-col :span="14"
                    ><p class="roomDetail">位置：{{ item.address }}</p>
                  </el-col>
                  <el-col :span="10"
                    ><p class="roomDetail">面积：{{ item.area }}㎡</p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="submitBox">
      <el-button type="primary" icon="el-icon-phone-outline" @click="showPhoneNumer">电话咨询</el-button
      ><el-button type="primary" @click="goOrder()">去预定</el-button>
    </div>
  </div>
</template>
<script>
import api from "../../../api/app";
import calendar from "./calendar.vue";
export default {
  components: { calendar },
  data() {
    return {
      id: null,
      month: "",
      roomList: [],
    };
  },
  created() {},
  mounted() {
    this.getRoomList();
  },
  methods: {
    showPhoneNumer() {
      this.$alert('请拨打客服电话 023-888866', '电话咨询', {
        confirmButtonText: '确定',
        callback: action => {
          console.log(action)
        }
      });
    },
    goOrder() {
      this.$router.push({ path: "/newActivityOrder", query: { id: this.id } });
    },
    checkRoom(idx) {
      for (let i = 0; i < this.roomList.length; i++) {
        this.roomList[i].checked = false;
      }
      this.roomList[idx].checked = true;
      this.id = this.roomList[idx].id;
      this.getDateInfo();
    },
    getDateInfo() {
      let data = {
        id: this.id,
        month: "2021-04",
      };
      console.log(data)
    },
    getRoomList() {
      var that = this;
      api
        .findSiteList()
        .then((res) => {
          console.log(res);
          that.id = res.data.data[0].id;
          that.roomList = [];
          for (let i = 0; i < res.data.data.length; i++) {
            let tempObj = {};
            tempObj = res.data.data[i];
            if (i == 0) {
              tempObj.checked = true;
            } else {
              tempObj.checked = false;
            }
            that.roomList.push(tempObj);
          }
        })
        .catch((err) => {console.log(err)});
    },
  },
};
</script>
<style scoped>
.container {
  width: 1080px;
  margin: 0 auto;
  margin-top: 50px;
  margin-bottom: 50px;
}
.roomList {
  margin-top: 50px;
}
.roomInfo {
  position: relative;
  border: 1px solid #ccc;
  padding: 16px;
  cursor: pointer;
  border-radius: 8px;
}
.checkBox {
  position: absolute;
  top: 5px;
  right: 5px;
}
.roomImage {
  width: 100%;
}
p.roomDetail {
  text-align: left;
  font-size: 14px;
  color: #656565;
}
p.roomName {
  text-align: left;
  font-size: 18px;
  color: #282828;
  margin: 10px 0 20px 0;
}
.roomInfo.active {
  border: 1px solid rgb(32, 116, 243);

  box-shadow: 0 5px 20px #ccc;
}
.submitBox {
  width: 1080px;
  margin: 0 auto;
  margin-top: 50px;
  text-align: right;
}
</style>

